<template>
  <el-row type="flex" content="end">
    <el-col class="header-tools">
      <!-- <i class="el-icon-bell"></i> -->
      <el-button type="text" icon="el-icon-user"> {{ $store.state.userInfo.adminName }}</el-button>

      <el-popconfirm
        confirm-button-text="退出"
        cancel-button-text="不用了"
        @confirm="systemExit"
        icon="el-icon-info"
        icon-color="red"
        title="要退出吗？"
      >
        <el-button type="warning" plain size="mini" slot="reference"> 退出系统</el-button>
      </el-popconfirm>
    </el-col>
  </el-row>
</template>

<script>
import { logOut } from '@/config/api'
export default {
  methods: {
    systemExit() {
      let token = this.$store.state.token
      logOut({ token }).then(res => {
        if (res.code === 200) {
          sessionStorage.removeItem('token')
          sessionStorage.removeItem('userInfo')
          sessionStorage.removeItem('acitveMenu')
          this.$store.dispatch('userInfo', {})
          this.$router.push('/')
        } else {
          this.$message({
            type: 'error',
            message: '退出系统失败'
          })
        }
      })
    }
  }
}
</script>

<style>
.user-photo {
  width: 20px;
  height: 20px;
  border-radius: 10px;
}
.header-tools {
  text-align: right;
  line-height: 60px;
}
.header-tools button {
  margin-left: 10px;
}
.header-tools img {
  vertical-align: middle;
}
</style>
